Vue.component('chartComponent',{
	props:{
		axisx:{
			type:Array,
			required:true,
			default:function(){
				return [];
			}
		},
		data:{
			type:Array,
			default:function(){
				return [];
			}
		},
		linestyle:{
			type:Object,
			required:false,
			default:function(){
				return {}
			}
		}
	},
	'template':`
		<div>
			<slot name="line"></slot>
			<div :id="chartId" class="chartBox"></div>
		</div>
	`,
	data:function(){
		return {
			chartId:'chart_'+this.uuid(8, 64),
			myChart:null,
			dataX:this.axisx,
			style:this.linestyle
		}
	},
	watch:{

	},
	mounted:function(){
		var _this=this;
		this.$nextTick(function(){
			this.init();
			setTimeout(function(){
				_this.loadData();
			},1000);
			
		});
	},
	methods:{
		uuid:function(len, radix) {
			//uuid函数，为chart设置id熟悉
		  var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
		  var uuid = [],
		    i;
		  radix = radix || chars.length;
		  if (len) {
		    // Compact form
		    for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
		  } else {
		    // rfc4122, version 4 form
		    var r;
		    // rfc4122 requires these characters
		    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
		    uuid[14] = '4';
		    // Fill in random data. At i==19 set the high bits of clock sequence as
		    // per rfc4122, sec. 4.1.5
		    for (i = 0; i < 36; i++) {
		      if (!uuid[i]) {
		        r = 0 | Math.random() * 16;
		        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
		      }
		    }
		  }
		  return uuid.join('');
		},
		handleInitData:function(){
			//将传过来的数据处理成echart需要的数据格式
			//输出x轴，y轴，legend属性
			var lines=this.$slots.line;
			var legend=[];
			var series=[];
			var dataX=this.dataX;
			for(var i=0;i<lines.length;i++){
				series.push(lines[i].data.attrs);
				legend.push(lines[i].data.attrs.name)
			}
			return {
				series:series,
				legend:legend,
				dataX:dataX
			}
		},
		init:function(){
			var option={
			        title: {
			            text: 'chart组件示例'
			        },
			        tooltip: {},
			        legend: {
			            data:[]
			        },
			        xAxis: {
			            data: []
			        },
			        yAxis: {},
			        series: [],
			        color:this.linestyle.lineColor
			};

			this.myChart= echarts.init(document.getElementById(this.chartId));
			this.showLoad();
			this.myChart.setOption(option);
		},
		showLoad:function(){
			var loadingConfig={
		      text: '',
		      color: '#b0e9fe',
		      textColor: '#000',
		      maskColor: 'rgba(255, 255, 255, 0)',
		      zlevel: 0
		    };
			this.myChart.showLoading(loadingConfig);
		},
		hideLoad:function(){
			this.myChart.hideLoading();
		},
		loadData:function(){
			this.hideLoad();
			var initData=this.handleInitData();
			this.myChart.setOption({
				legend: {
			        data:initData.legend
			    },
			    xAxis: {
		            data: initData.dataX
		        },
		        series: initData.series
			})
		}
	}

})